// 引入一个包
const path = require('path')
// 引入html插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
	
	//指定入口文件 通常放在src 源码目录
	entry: "./src/index.ts",
	
	// 指定打包文件所在目录
	output:{
		//指定打包文件的目录
		path:path.resolve(__dirname, 'dist'),
		// 打包后的文件
		filename: "bundle.js",
		
		//告诉webpack不要使用箭头函数以及const 我要兼容IE
		environment:{
			arrowFunction:false,
			const:false

		}
	},
	
	// 指定webpack打包时要使用的模块
	module:{
		//指定要加载的规则
		rules:[
			{
				// test指定的是规则生效的文件//去匹配所有以ts结尾的文件
				test:/\.ts$/,
				// 要使用对应的loader //从后往前执行 先执行ts-loader
				use: [
					//配置babel
					{
						//指定加载器
						loader:"babel-loader",
						//设置babel
						options:{
							// 设置预定义的环境
							presets:[
								[
									//指定环境的插件
									"@babel/preset-env",
									//配置信息
									{
										//要兼容的目标浏览器
										targets:{
											//"chrome":"88" //兼容到chrome88版本最新的  语法都能识别
											"chrome":"58",
											"ie":"11" //要兼容ie 11  不支持const语法的 
										},
										//指定corejs的版本
										"corejs": "3", //比如我们用了promise ie11是没有promise语法的 此时corejs就起作用了
										//使用core js的方式 "usage"表示按需加载
										"useBuiltIns":"usage"
									}
								]
							]
						}
					},
					//'babel-loader' 配置选项少的时候直接用就行了 多的就像上面那样配置
					'ts-loader'
				],
				// 要排除的文件
				exclude:/node_modules/	
			},

			//设置less文件的处理
			{
				test:/\.less$/,
				use:[
					"style-loader",
					"css-loader",
					// 引入postcss
					{
						loader:"postcss-loader",
						options:{
							postcssOptions:{
								plugins:[
									[
										"postcss-preset-env",
										{
											browsers:'last 2 version' //兼容两个最新的浏览器
										}
									]
								]
							}
						}
					},
					"less-loader"
				]
			}
		]
	},
	//配置webpack插件
	plugins:[
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			//title:"这是一个自定义的title"
			template:"./src/index.html" //引入你自己定义的模板
		}),
	],
	
	// 用来设置引用模块
	resolve:{
		extensions: ['.ts', '.js']
	}
}